<template>
    <div style="height: 100%;width: 100%">
        <div class="header">
            <el-button type="primary" icon="el-icon-edit" @click="add">新增</el-button>
        </div>
        <div class="main">
            <div class="table">
                <vue-scroll>
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%;max-width:1600px;height: 100%;padding: 15px 20px;border-radius: 5px;box-shadow: 1px 1px 5px #ccc;">
                        <el-table-column
                                type="index"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="username"
                                label="用户名"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="phone"
                                label="手机号"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="collegename"
                                label="学院"
                                width="150">
                        </el-table-column>

                        <el-table-column
                                prop="majorname"
                                width="150"
                                label="专业">
                        </el-table-column>
                        <el-table-column
                                prop="email"
                                width="150"
                                label="邮箱">
                        </el-table-column>

                        <el-table-column
                                label="头像">
                            <template slot-scope="scope">
                                <span v-if="!scope.row.img">暂无</span>
                                <el-image style="width: 100px" :src="scope.row.img" fit="contain" :preview-src-list="[scope.row.img]"/>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
                                <el-button type="primary" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>

                            </template>
                        </el-table-column>
                    </el-table>
                </vue-scroll>
            </div>
            <div class="main-footer">
                <el-pagination
                        :current-page="page.page"
                        :page-sizes="[20, 50, 100]"
                        :page-size="page.rows"
                        layout="total,sizes,prev,pager,next,jumper"
                        background
                        :total="page.total"
                        @size-change="handleSizeChange"
                        @current-change="handlePageNumChange"
                />
            </div>
        </div>
        <el-dialog :visible.sync="formDataVisible" :title="dialogtitle"
                   top="40px" :close-on-click-modal="false" width="500px">
            <el-form ref="form" :model="formData" label-width="100px" label-suffix="：">
                <el-form-item label="用户名">
                    <el-input v-model="formData.username" placeholder="课程名"/>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input-number v-model="formData.phone"/>
                </el-form-item>
                <el-form-item label="学院">
                    <el-input-number v-model="formData.collegename"/>
                </el-form-item>
                <el-form-item label="专业">
                    <el-input-number v-model="formData.majorname"/>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input-number v-model="formData.email"/>
                </el-form-item>
                <el-form-item label="角色">
                    <el-radio-group v-model="formData.role" class="radio-group">
                        <el-radio :label="0">学生</el-radio>
                        <el-radio :label="1">老师</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload action='' :on-change="getFile" :limit="1" list-type="picture" :auto-upload="false">
                        <el-button size="small" type="primary">选择图片上传,最多上传一张图片</el-button>
                    </el-upload>
                </el-form-item>

            </el-form>

            <div>
                <el-button @click="formDataVisible=false;">取消</el-button>
                <el-button type="primary" @click="submitEvent">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import userApi from "../../api/userApi";
    import commonMethod from "../../util/commomMethods";

    export default {
        name: "listinfo",
        data() {
            return {
                dialogtitle:"",
                formDataVisible:false,
                tableData: [],
                page: {page: 1, rows: 20, total: 0},
                formData:{college: "",
                    collegename: "",
                    email: "",
                    id: "",
                    img: "",
                    major: "",
                    majorname: "",
                    password: "",
                    phone: "",
                    username: "",
                    role:0},
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.loadData();
            },
            loadData(){
                const {page, rows} = this.page
                userApi.getList("","",page,rows).then(res=>{
                    this.tableData=res.data.rows;
                    this.page.total = res.data.total
                }).catch(error=>this.$message.error(error));
            },
            del(row){
                this.$confirm('是否删除', '删除').then(() => {
                    userApi.deleteItem(row.id).then(res=>{
                        if(res.data.status.toLowerCase()=='ok'){
                            this.$message.success("删除成功");
                        }else{
                            this.$message.success("删除失败");
                        }
                        this.loadData();
                    }).catch(error=>{
                        this.$message.success("删除失败");
                        this.loadData();
                    })
                })
            },
            edit(data){
                this.formData = data;
                this.formDataVisible = true;
            },
            add(){
                this.formData = {college: "",
                    collegename: "",
                    email: "",
                    id: "",
                    img: "",
                    major: "",
                    majorname: "",
                    password: "",
                    phone: "",
                    username: "",
                    role:0}
                this.formDataVisible = true;
            },
            handleSizeChange(val) {
                this.page.rows = val
                this.page.page = 1
                this.loadData()
            },
            handlePageNumChange(val) {
                this.page.page = val
                this.loadData()
            },
            submitEvent(){
                if(this.formData.start){
                    this.formData.start = commonMethod.formatDate2(this.formData.start);
                }
                if(this.formData.end){
                    this.formData.end = commonMethod.formatDate2(this.formData.end);
                }
              userApi.addItem(this.formData).then(res=>{
                  if(res.data.status.toLowerCase()==='ok'){
                      this.$message.success("添加成功");
                  }else{
                      this.$message.success("添加失败");
                  }
                  this.formDataVisible = false;
                  this.loadData();
              }).catch(error=> {
                  this.$message.success("添加失败");
                  this.loadData();
                  this.formDataVisible = false;
              })
            },
            getFile(file) {

                this.getBase64(file.raw).then(res => {
                    this.formData.img = res;
                });
            },
            getBase64(file) {
                return new Promise(function(resolve, reject) {
                    let reader = new FileReader();
                    let imgResult = "";
                    reader.readAsDataURL(file);
                    reader.onload = function() {
                        imgResult = reader.result;
                    };
                    reader.onerror = function(error) {
                        reject(error);
                    };
                    reader.onloadend = function() {
                        resolve(imgResult);
                    };
                });
            },
        }
    }
</script>

<style>
    .header {
        height: 60px;
        width: 100%;
    }

    .main {
        height: calc(100% - 180px);
    }

    .table {
        width: calc(100% - 40px);
        height: calc(100% - 60px);
    }

    .main-footer {
        height: 40px;
        width: 100%;
    }
</style>